<!DOCTYPE html>
<html>
<!---需要技术支持联系QQ：44312658--->
<head>
    <meta charset="utf-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
</head>
<body>
<div class="wrap login_wrap" id="app">
    <div class="content">
        <div class="logo"></div>
        <div class="login_box">

            <div class="login_form">
                <div class="login_title">
                    登录
                </div>
                <form action="#" method="post">

                    <div class="form_text_ipt">
                        <input name="identify" type="text" v-model="loginUser.identify"
                               placeholder="手机号/邮箱/用户名">
                    </div>
                    <div class="ececk_warning"><span>手机号/邮箱不能为空</span></div>
                    <div class="form_text_ipt">
                        <input name="password" v-model="loginUser.password" type="password" placeholder="密码">
                    </div>
                    <div class="ececk_warning"><span>密码不能为空</span></div>
                    <div style="text-align: center">
                        <img :src="randomCodeUrl" title="看不清楚，点击换一张。" style="cursor:pointer;"
                             @click="refreshRandomCodeImageUrl"/>
                    </div>
                    <div class="form_text_ipt">
                        <input name="code" v-model="loginUser.randomCode" type="text" placeholder="验证码">
                    </div>
                    <div class="ececk_warning"><span>验证码不能为空</span></div>
                    <div class="form_check_ipt">
                        <div class="left check_left">
                            <label><input name="rememberme" v-model="rememberme" type="checkbox"> 记住我</label>
                        </div>
                        <div class="right check_right">
                            <a href="#">忘记密码</a>
                        </div>
                    </div>
                    <div class="form_btn">
                        <button type="button" @click="userLogin">登录</button>
                    </div>
                    <div class="form_reg_btn">
                        <span>还没有帐号？</span><a href="reg.html">马上注册</a>
                    </div>
                </form>
                <div class="other_login">
                    <div class="left other_left">
                        <span>其它登录方式</span>
                    </div>
                    <div class="right other_right">
                        <a href="#"><i class="fa fa-qq fa-2x"></i></a>
                        <a href="#"><i class="fa fa-weixin fa-2x"></i></a>
                        <a href="#"><i class="fa fa-weibo fa-2x"></i></a>
                    </div>
                </div>
                <div style="text-align: center">
                    <div>测试用户名：test,测试密码：123456</div>
                    <span><a href="index.html">返回首页</a></span>
                    <br/>
                    <br/>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/include/libs.js"></script>

<script>
    if(sessionStorage.getItem("status.xiaomimall")){
        let flag = JSON.parse(sessionStorage.getItem("status.xiaomimall"));
        if(flag){
            window.location.href='index.html';
        }
    }
</script>

<script type="module">
    //引入前端nanoid令牌生成工具类库
    import {nanoid} from "./js/util/nanoid.js";

    let vm = new Vue({
        el: '#app',

        data: {
            //登录的用户对象
            loginUser: {
                identify: '',
                password: '',
                randomCode: ''
            },
            token: nanoid(16),
            randomCodeUrl: '',
            rememberme: true
        },
        mounted() {
            //读取cookie初始化用户名和密码
            if(outils.getCookie("username.xiaomimall.com")!==null){
                this.loginUser.identify = decrypt(outils.getCookie("username.xiaomimall.com"));
                this.loginUser.password = decrypt(outils.getCookie("password.xiaomimall.com"));
            }

            console.log('本页面的客户端token:' + this.token);
            this.refreshRandomCodeImageUrl();
        },
        methods: {

            //更新图形验证码接口的URL地址
            refreshRandomCodeImageUrl() {
                this.randomCodeUrl = baseUrl + '/commons/hutoolRandomCode?token=' + this.token + '&tm=' + new Date().getTime();
            },

            //用户登录方法
            userLogin() {
                let params = {
                    identify: this.loginUser.identify,
                    password: this.loginUser.password,
                    token: this.token,
                    code: this.loginUser.randomCode
                };

                login(params).then(resp => {
                    if (resp.data.code === 200) {
                        //登录成功
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                        //注意登录成功后把用户信息输出一下
                        console.log('-----登录成的用户信息如下-----')
                        console.log(resp.data.data);

                        //把会员卡的名字和会员卡号保存到浏览器的cookie中。
                        outils.setCookie("satoken", resp.data.data.tokenValue, 100); //默认保存一百天；
                        //起一个定时器，1秒钟之后，跳转到网站的首页
                        let tempObj = resp.data.data;
                        tempObj.tokenName = "";
                        tempObj.tokenValue = "";
                        window.localStorage.setItem("currentLoginSuccessUserInfo", JSON.stringify(tempObj));

                        sessionStorage.setItem("status.xiaomimall",true);
                        //判断用户是否要记住我。
                        if (this.rememberme) {
                            outils.setCookie("username.xiaomimall.com", encrypt(this.loginUser.identify),100);
                            outils.setCookie("password.xiaomimall.com", encrypt(this.loginUser.password),100);
                        } else {
                            outils.removeCookie("username.xiaomimall.com");
                            outils.removeCookie("password.xiaomimall.com");
                        }
                        setTimeout(() => {
                            window.location.href = 'index.html'
                        }, 1000);
                    } else {
                        //登录成功
                        this.$message({
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }
                })
            }
        }
    })

</script>
</body>
</html>
